<template>
  <div class="container">
    <div class="left-header">
      <div class="public_title flex items-middle space-between">
        <div class="click_more">
          <span>政府部门</span>
        </div>
        <div class="examine changeHanld" @click="hanldClick2">查看更多</div>
      </div>
    </div>
    <div class="public_main" v-if="department != ''">
      <div class="country">国家</div>
      <div class="decorate_list" v-if="!department.countryGovernmentDepartment">
        <span>
          <i class="decorate"></i>暂无数据
        </span>
      </div>
      <div
        v-else
        class="decorate_list"
        v-for="(v, i) in department.countryGovernmentDepartment"
        :key="'countryGovernmentDepartment' + i"
      >
        <span class="finger" @click="seeEnterprise(v.departmentId)">
          <i class="decorate"></i>
          {{ kzzs(v.departmentName) }}
        </span>
        <button
          :class="v.whetherAttention == 1 ? 'active' : ''"
          class="changeHanld"
          @click="isAttention(v.departmentId, v)"
        >{{ v.whetherAttention == 0 ? "订阅" : "已订阅" }}</button>
      </div>
      <div class="country">{{ provinceName || "省级" }}</div>
      <div
        class="decorate_list"
        v-if="
          department != '' && !department.provinceGovernmentDepartment
        "
      >
        <span>
          <i class="decorate"></i>暂无数据
        </span>
      </div>
      <div
        v-else
        class="decorate_list"
        v-for="(v, i) in department.provinceGovernmentDepartment"
        :key="'provinceGovernmentDepartment' + i"
      >
        <span class="finger" @click="seeEnterprise(v.departmentId)">
          <i class="decorate"></i>
          {{ kzzs(v.departmentName) }}
        </span>
        <button
          :class="v.whetherAttention == 1 ? 'active' : ''"
          class="changeHanld"
          @click="isAttention(v.departmentId, v)"
        >{{ v.whetherAttention == 0 ? "订阅" : "已订阅" }}</button>
      </div>

      <div class="country">{{ cityName || "市级" }}</div>
      <div class="decorate_list" v-if="department != '' && !department.cityGovernmentDepartment">
        <span>
          <i class="decorate"></i>暂无数据
        </span>
      </div>
      <div
        v-else
        class="decorate_list_item"
        v-for="(v, i) in department.cityGovernmentDepartment"
        :key="'cityGovernmentDepartment' + i"
      >
        <span class="finger" @click="seeEnterprise(v.departmentId)">
          <i class="decorate"></i>
          {{ kzzs(v.departmentName) }}
        </span>
        <button
          :class="v.whetherAttention == 1 ? 'active' : ''"
          class="changeHanld"
          @click="isAttention(v.departmentId, v)"
        >{{ v.whetherAttention == 0 ? "订阅" : "已订阅" }}</button>
      </div>
      <!-- 订阅部门选取关键字 -->
      <keyWord ref="keyWord" @onSubmit="attention"></keyWord>
      <!-- 登录弹窗 -->
      <login-dialog ref="login" @reload="reload"></login-dialog>
      <!-- 升级vip弹窗 -->
      <vip-dialog ref="vip" @toVip="toVip"></vip-dialog>
    </div>
  </div>
</template>

<script>
import {
  commonRequest,
  cancelAttention,
  departmentAttention,
  getGovernmentDepartmentsConcerned
} from "../../api/api.js";
import { mapMutations } from "vuex";
import {
  sessionDeposit,
  sessionTake,
  getToken,
  removeToke
} from "../../util/validate.js";
import loginDialog from "../../components/login_item/LoginDialog";
import keyWord from "../../components/keyWord.vue"; //部门订阅关键字
import vipDialog from "../../components/vipDialog"; //升级vip弹窗
export default {
  components: {
    loginDialog,
    keyWord,
    vipDialog
  },
  data() {
    return {
      cityName: "", // 城市名字
      provinceName: "", //省份名称
      department: {
        countryGovernmentDepartment: [],
        provinceGovernmentDepartment: [],
        cityGovernmentDepartment: []
      } //订阅部门数据
    };
  },
  watch: {
    "$store.state.token"(val) {
      this.getCityName();
    }
  },
  mounted() {
    this.getCityName();
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 点击查看多
    hanldClick2() {
      window.open("/subscriptionpage", "_blank");
    },
    // 跳转部门内页
    seeEnterprise(id) {
      window.open("/departmentInside?id=" + id);
    },
    // 控制字数
    kzzs(val) {
      if (val.length > 12) {
        return val.slice(0, 11) + "...";
      } else {
        return val;
      }
    },
    isAttention(id, val) {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
        return;
      }
      if (val.whetherAttention == 1) {
        cancelAttention(id).then(res => {
          if (res.code === 200) {
            this.getDepartList();
            this.$message.success({
              message: "取消订阅成功",
              type: "success"
            });
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        this.$refs.keyWord.open(id);
      }
    },
    // 订阅
    attention(id, keyWord) {
      let params = {
        departmentId: id,
        keywords: keyWord
      };
      departmentAttention(params).then(res => {
        if (res.code === 10001) {
          this.$refs.login.open();
        } else if (res.code === 10002) {
          this.$refs.vip.open();
        } else if (res.code == 200) {
          this.getDepartList();
          this.$message({
            type: "success",
            message: "订阅成功"
          });
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    toVip() {
      window.open("/pageVIP", "_balnk");
    },
    getCityName() {
      commonRequest("/api/sys/depart/getSubInfo", {}).then(res => {
        if (res.result.province !== "" && res.result.city !== "") {
          sessionDeposit("cityName", res.result.city); // 城市名
          sessionDeposit("provinceName", res.result.province); // 省份名
          this.cityName = res.result.city; // 城市名
          this.provinceName = res.result.province; //省份名
        } else if (
          sessionTake("cityName") == "全国" &&
          !sessionTake("provinceName")
        ) {
          this.cityName = "";
          this.provinceName = "";
        } else if (!sessionTake("cityName") || !sessionTake("provinceName")) {
          this.cityName = "广州市";
          this.provinceName = "广东省";
        } else {
          this.cityName = sessionTake("cityName"); // 城市名
          this.provinceName = sessionTake("provinceName"); //省份名
        }
        this.getDepartList();
      });
    },
    getDepartList() {
      let params = {
        city: this.cityName,
        province: this.provinceName
      };
      getGovernmentDepartmentsConcerned(params).then(res => {
        this.department = res.result;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 347px;
  // margin-top: 20px;
  .public_title {
    height: 30px;
    margin: 14px 0;

    .click_more {
      color: #000;
      font-weight: 700;
      // font-size: 18px;
      display: flex;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }

    .examine {
      color: #44a2ff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }

    span {
      margin-left: 34px;
      position: relative;
      font-size: 18px;
      z-index: 1;

      &::before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        top: 1px;
        left: -34px;
        background-color: #1677ff;
      }

      &::after {
        content: "";
        position: absolute;
        height: 15px;
        width: 15px;
        top: 7px;
        left: -26px;
        background-color: #76ddfb;
      }
    }
  }
}
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;
  // text-align: center;
  // position: relative;
  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    .top {
      font-size: 14px;
      color: #000;
    }
    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}
.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;
  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }
  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
  }
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}
.finger {
  cursor: pointer;
}
.public_main {
  padding: 0 15px;
  box-sizing: border-box;
  height: 550px;
  background: #ffffff;
}
.country {
  color: #79bdff;
  height: 50px;
  font-size: 18px;
  display: flex;
  align-items: center;
}
.decorate_list_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42.5px;

  .finger {
    display: flex;
    align-items: center;
    font-size: 14px;
    &:hover {
      color: #1d78de;
    }
  }
  i {
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: #ccc;
  }

  button {
    font-size: 14px;
    width: 60px;
    height: 26px;
    border-radius: 4px;
    color: rgb(68, 162, 255);
    background: rgb(255, 255, 255);
    border: 1px solid rgb(68, 162, 255);
    &.active {
      background: #cbdce8;
      color: #fff;
      border: none;
    }
  }
}
.decorate_list {
  display: flex;
  justify-content: space-between;
  height: 42.5px;
  align-items: center;
  span {
    display: flex;
    flex: 1;
    align-items: center;
    font-size: 14px;
    i {
      display: block;
      width: 10px;
      height: 10px;
      margin-right: 10px;
      background-color: #ccc;
    }
    &:hover {
      color: #44a2ff;
    }
  }
  button {
    font-size: 14px;
    width: 60px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #44a2ff;
    background: #fff;
    border: 1px solid #44a2ff;
    &.active {
      background: #cbdce8;
      color: #fff;
      border: none;
    }
  }
}
</style>
